
const _interopRequireDefault = require('@babel/runtime/helpers/interopRequireDefault');

exports.__esModule = true;
exports.default = void 0;

const _utils = require('../utils');

const _lockClick = require('./lock-click');

const _popup = require('../mixins/popup');

const _icon = _interopRequireDefault(require('../icon'));

const _loading = _interopRequireDefault(require('../loading'));

// Utils
// Mixins
// Components
const _createNamespace = (0, _utils.createNamespace)('toast');
const createComponent = _createNamespace[0];
const bem = _createNamespace[1];

const _default = createComponent({
  mixins: [(0, _popup.PopupMixin)()],
  props: {
    icon: String,
    className: null,
    iconPrefix: String,
    loadingType: String,
    forbidClick: Boolean,
    closeOnClick: Boolean,
    message: [Number, String],
    type: {
      type: String,
      default: 'text',
    },
    position: {
      type: String,
      default: 'middle',
    },
    transition: {
      type: String,
      default: 'van-fade',
    },
    lockScroll: {
      type: Boolean,
      default: false,
    },
  },
  data: function data() {
    return {
      clickable: false,
    };
  },
  mounted: function mounted() {
    this.toggleClickable();
  },
  destroyed: function destroyed() {
    this.toggleClickable();
  },
  watch: {
    value: 'toggleClickable',
    forbidClick: 'toggleClickable',
  },
  methods: {
    onClick: function onClick() {
      if (this.closeOnClick) {
        this.close();
      }
    },
    toggleClickable: function toggleClickable() {
      const clickable = this.value && this.forbidClick;

      if (this.clickable !== clickable) {
        this.clickable = clickable;
        (0, _lockClick.lockClick)(clickable);
      }
    },

    /* istanbul ignore next */
    onAfterEnter: function onAfterEnter() {
      this.$emit('opened');

      if (this.onOpened) {
        this.onOpened();
      }
    },
    onAfterLeave: function onAfterLeave() {
      this.$emit('closed');
    },
    genIcon: function genIcon() {
      const h = this.$createElement;
      const { icon } = this;
      const { type } = this;
      const { iconPrefix } = this;
      const { loadingType } = this;
      const hasIcon = icon || type === 'success' || type === 'fail';

      if (hasIcon) {
        return h(_icon.default, {
          class: bem('icon'),
          attrs: {
            classPrefix: iconPrefix,
            name: icon || type,
          },
        });
      }

      if (type === 'loading') {
        return h(_loading.default, {
          class: bem('loading'),
          attrs: {
            type: loadingType,
          },
        });
      }
    },
    genMessage: function genMessage() {
      const h = this.$createElement;
      const { type } = this;
      const { message } = this;

      if (!(0, _utils.isDef)(message) || message === '') {
        return;
      }

      if (type === 'html') {
        return h('div', {
          class: bem('text'),
          domProps: {
            innerHTML: message,
          },
        });
      }

      return h('div', {
        class: bem('text'),
      }, [message]);
    },
  },
  render: function render() {
    let _ref;

    const h = arguments[0];
    return h('transition', {
      attrs: {
        name: this.transition,
      },
      on: {
        afterEnter: this.onAfterEnter,
        afterLeave: this.onAfterLeave,
      },
    }, [h('div', {
      directives: [{
        name: 'show',
        value: this.value,
      }],
      class: [bem([this.position, (_ref = {}, _ref[this.type] = !this.icon, _ref)]), this.className],
      on: {
        click: this.onClick,
      },
    }, [this.genIcon(), this.genMessage()])]);
  },
});

exports.default = _default;
